<template>
  <div id="app">
    <el-upload
    action='http://linweiqin.cn:8001/v1/addimg/avatar'
    :show-file-list='false'
    :on-success='handleAvatarSuccess'
    :before-upload='beforeAvatarUpload'
    >
    <img v-if="imageUrl" :src="imageUrl" alt="">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
export default {
  data(){
    return {
     imageUrl:''
    }
  },
   methods:{
      handleAvatarSuccess:function(res){
        let imageUrl='http://linweiqin.cn:8001/img/'+res.image_path;
        this.imageUrl=imageUrl
      },
      beforeAvatarUpload:function(file){
        let size_M=file.size/1024/1024;
        let imageType=file.type.trim();
        let limit2M=size_M>2?false:true;
        if(!limit2M){
          this.$message('上传超过2M')
        }
        let valid_image_type=true;
        if(imageType=='image/png'||imageType=='image/jpeg'){
          valid_image_type=true;
        }else{
          valid_image_type=false;
          this.$message({
            type:'warning',
            message:'格式不正确'
          })
        }
        return limit2M&&valid_image_type
      }
    }
}
</script>
<style>
*{
  padding: 0;
  margin: 0;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #ddd;
}
.el-icon-plus:before {
    content: "\e6d9";
    text-align: center;
    line-height: 178px;
}
</style>
